<template>
	<view class="rankingView">
		<view class="back">
			<goBack :title="'食物排行榜'"></goBack>
		</view>

		<view class="list">
			<view class="list_left">
				<li v-for="(item, index) in content"
				 @click="toggleActiveKey(index)"
				 :class="activeKey == index?'select':''" :key="index">
					{{item.target}}
				</li>
			</view>

			<view class="list_right">
				<template v-if="content[activeKey]">
					<li v-for="(item, index) in content[activeKey].list"
					 :key="index" @click="toDetail(item.id)">
						<view class="li_img">
							<image :src="item.image" />
						</view>
						<view class="li_content">
							<text>{{ item.title }}</text>
							<image src="../../static/ic_arrow_right_default.png" />
						</view>
					</li>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeKey: 0,
				content: [],
			};
		},
		methods:{
			toggleActiveKey:function(index){
				this.activeKey = index;
			},
			toDetail:function(id){
				uni.navigateTo({
					url:'../FoodDetail/FoodDetail?id='+id
				})
			}
		},
		created: function() {
			uni.request({
				url: `https://api.kele8.cn/agent/http://one.boohee.com/store/pages/food_list_json`,
				success: (res) => {
					this.content = res.data.content;
				}
			})
		},
	}
</script>

<style lang="scss" scoped>
	.rankingView {
		.back {
			position: sticky;
			top: 0;
			left: 0;
			z-index: 6;
		}

		.list {
			display: flex;
			justify-content: flex-start;

			.select {
				background-color: white;
				position: relative;
				&::after{
					position: absolute;
					background-color: #72F730;
					height: 20px;
					width: 2px;
					left: 0;
					top: 30%;
					bottom: 30%;
					content: "";
				}
			}

			.list_left {
				list-style: none;
				font-size: 14px;
				li {
					padding: 20px;
				
				}
			}

			.list_right {
				flex: 1;
				background: white;
				display: flex;
				align-items: center;
				flex-direction: column;

				li {
					list-style: none;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 100%;
					height: 100px;
					box-sizing: border-box;

					.li_img {
						margin-left: 20px;

						image {
							width: 50px;
							height: 50px;
							border-radius: 5px;
						}
					}

					.li_content {
						display: flex;
						flex: 1;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #ededed;
						height: 100%;
						padding: 20px 20px 20px 0;
						box-sizing: border-box;
						margin-left: 20px;

						image {
							width: 7.5px;
							height: 15px;
						}

						text {
							font-size: 15px;
						}
					}
				}
			}
		}
	}
</style>
